<template>
  <div class="container">
    <el-row>
      <el-form :model="formInline" @keyup.enter.native="search">
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.send.expresscode')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.subordercode"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.send.sendingcode')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.sendingcode" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.in.ordernumber')" :label-width="formLabelWidth">
            <el-input maxlength="30" show-word-limit v-model="formInline.ordercode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.out.storeordercode')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.storeordercode" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-form-item>
            <el-button @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
            <el-button type="primary" @click="doSend" v-if="hasPermission('send')">{{$t('m.send.send')}}</el-button>
            <!-- <el-button type @click="editOrder">{{$t('m.edit')}}</el-button> -->
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="ellipse"></div>
    <el-table
      ref="table"
      stripe
      empty-text
      fits
      v-loading="tableLoading"
      class="table-wrap single-select-table"
      :data="tableData"
      :row-style="tableRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
      @selection-change="handleSingleSelectionChange">
      <el-table-column align="center" type="selection" width="55"></el-table-column>
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <el-table-column align="center" prop="subordercode" :label="$t('m.send.expresscode')"></el-table-column>
      <el-table-column align="center" prop="sendingcode" :label="$t('m.send.sendingcode')"></el-table-column>
      <el-table-column :label="$t('m.state')" align="center" prop="statetext">
        <!-- <template slot-scope="scope">
          没有国际化
          <span v-if="scope.row.state==1">待处理</span>
          <span v-if="scope.row.state==2">交寄完成</span>
          <span v-if="scope.row.state==10">已取消</span>
        </template> -->
      </el-table-column>
      <el-table-column align="center" prop="ordercode" :label="$t('m.in.ordernumber')"></el-table-column>
      <el-table-column align="center" prop="consignee" :label="$t('m.out.consignee')"></el-table-column>
      <el-table-column align="center" prop="contact" :label="$t('m.out.contact')"></el-table-column>
      <el-table-column align="center" prop="provincename" :label="$t('m.out.provincename')"></el-table-column>
      <el-table-column align="center" prop="cityname" :label="$t('m.out.cityname')"></el-table-column>
      <el-table-column align="center" prop="regionname" :label="$t('m.out.regionname')"></el-table-column>
      <el-table-column align="center" prop="shippingaddress" :label="$t('m.out.address')"></el-table-column>
    </el-table>

    <el-pagination background layout="sizes, prev, pager, next, jumper" :page-sizes="pageSizeList" :page-size="rowSize" :current-page="page" :total="totalRows" @current-change="currentChangeInitFn" @size-change="handleSizeChangeInitFn"></el-pagination>

    <!-- 交寄结果 dialog 开始 -->
    <el-dialog width="1200px" :title="$t('m.send.send')" :visible.sync="dialogFormVisible" @close="close">
      <div v-loading="popLoading">
        <el-form>
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('m.send.expresscode')" :label-width="formLabelWidth" prop="expresscode">
                <el-input maxlength="20" show-word-limit v-model="expresscode" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-table
          ref="resultTable"
          stripe
          empty-text
          fits
          :data="sendingData.sendingDetailOutputList">
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" label="SKU" prop="productspeccode"></el-table-column>
          <el-table-column align="center" label="SupplierCode" prop="suppliercode"></el-table-column>
          <el-table-column align="center" :label="$t('m.in.productname')" prop="productname"></el-table-column>
          <el-table-column align="center" :label="$t('m.in.productspec')" prop="productspec"></el-table-column>
          <el-table-column align="center" :label="$t('m.review.cartons')" prop="cartons"></el-table-column>
        </el-table>
        <el-row>
          <el-col :span="3" v-for="(item,index) in sendingData.packageOutputs" :key="index">
            <span>{{item.packagename}} :</span>
            <span>{{item.packagenumber}}</span>
          </el-col>
        </el-row>
        <div class="btns">
          <el-button size="mini" @click="close">{{$t('m.close')}}</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 交寄结果 dialog 结束 -->

    <!-- 交寄 dialog 开始 -->
    <el-dialog :close-on-click-modal="false" width="1200px" :title="$t('m.send.send')" :visible.sync="dialogFormVisible1" @close="closeForm">
      <div v-loading="popLoading">
        <el-form :model="sendingForm" ref="sendingForm" @submit.native.prevent>
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('m.send.expresscode')" :label-width="formLabelWidth" prop="expresscode">
                <el-input @input="func" ref="expresscode" @keyup.enter.native="sending" v-model="sendingForm.expresscode" placeholder></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="result">
          <p v-for="(item,index) in resultArr" :key="index">{{$t('m.send.expresscode')}}:{{item}}<span>{{$t('m.send.success')}}</span></p>
        </div>
        <!--
        <el-table
          ref="resultTable"
          stripe
          :data="sendingData.sendingDetailOutputList"
          empty-text
          fits
        >
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" label="SKU" prop="productspeccode"></el-table-column>
          <el-table-column align="center" label="SupplierCode" prop="suppliercode"></el-table-column>
          <el-table-column align="center" :label="$t('m.in.productname')" prop="productname"></el-table-column>
          <el-table-column align="center" :label="$t('m.in.productspec')" prop="productspec"></el-table-column>
          <el-table-column align="center" :label="$t('m.review.cartons')" prop="cartons"></el-table-column>
        </el-table>-->
        <!-- <el-row>
          <el-col :span="3" v-for="(item,index) in sendingData.packageOutputs" :key="index">
            <span>{{item.packagename}} :</span>
            <span>{{item.packagenumber}}</span>
          </el-col>
        </el-row> -->
        <div class="btns">
          <el-button :disabled="isdisabled" type="primary" @click="sending">{{$t('m.send.send')}}</el-button>
          <el-button @click="closeForm">{{$t('m.close')}}</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 交寄 dialog 结束 -->
  </div>
</template>

<script>
export default {
  name:'ReviewPackaging',
  data(){
    return {
      resultArr:[],//交寄结果（快递单号数组）
      isdisabled:false,
      blur:true,
      popLoading:false,
      formInline:{
        ordercode:'',
        expresscode:'',
        shippingaddress:'',
        shopid:'',
        stateid:null,
        storeordercode:'',
        warehouseid:null,
        subordercode:'',
        sendingcode:''
      },
      tableData:[],
      dialogFormVisible:false,
      dialogFormVisible1:false,
      formLabelWidth:'180px',
      sendingData:{},
      sendingForm:{
        expresscode:''
      },
      expresscode:''
    }
  },
  methods:{
    init(){
      this.tableLoading = true
      this.$axios({
        method:'get',
        url:'/sending/page',
        params:{
          page:this.page,
          rows:this.rowSize,
          ordercode:this.formInline.ordercode,
          subordercode:this.formInline.subordercode,
          productspeccode:this.formInline.productspeccode,
          storeordercode:this.formInline.storeordercode,
          sendingcode:this.formInline.sendingcode
        }
      }).then(({ data }) => {
        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(()=>this.tableLoading=false,500)
      })
    },
    search(){
      this.page = 1
      this.init()
    },

    close(){
      this.dialogFormVisible = false
      this.sendingData = {}
      this.init()
    },
    closeForm(){
      this.dialogFormVisible1 = false
      this.resultArr=[]
      this.$refs['sendingForm'].resetFields()
      this.sendingData = {}
      this.sendingForm.expresscode = ''
      this.tableRowSelected = []
      this.isdisabled = false
      this.init()
    },
    openResult(row){
      this.expresscode = row.expresscode
      this.dialogFormVisible = true
      this.sendingResult(row.expresscode)
    },
    func(){
      this.blur = true
    },
    sendingResultBlur(expresscode){
      this.sendingResult(expresscode)
    },
    sendingResultEnter(expresscode){
      this.$refs.expresscode.select()
      this.blur = false
      this.sendingResult(expresscode)
    },
    sendingResult(expresscode){
      if (expresscode){
        this.$axios({
          method:'get',
          url:`/sending/expresscode?expresscode=${expresscode}&state=1`
        }).then(({ data }) => {
          this.sendingData = data
          if (data.state === 1){
            this.isdisabled = false
            this.sendingData = data
          } else {
            this.isdisabled = true
          }
        })
      }
    },
    doSend(){
      if (this.tableRowSelected.length === 0){
        this.dialogFormVisible1 = true
        this.$nextTick(() => {
          this.$refs.expresscode.focus() //输入框默认获取焦点
        })
      }
      if (this.tableRowSelected.length){
        if (this.tableRowSelected[0].state === 1){
          this.dialogFormVisible1 = true
          this.sendingForm.expresscode = this.tableRowSelected[0].subordercode
          this.$nextTick(() => {
            this.$refs.expresscode.select() //输入框默认获取焦点
          })
          // this.sendingResult(this.tableRowSelected[0].expresscode)
        } else {
          this.$message(this.$t('m.send.limit1'))
        }
      }
    },
    sending(){
      if(this.sendingForm.expresscode){
        this.$nextTick(() => {
          this.$refs.expresscode.select() //输入框默认获取焦点
        })
        this.$axios({
          method:'post',
          url:`/sending/dosend?subordercode=${this.sendingForm.expresscode}`
        }).then(() => {
          this.resultArr.unshift(this.sendingForm.expresscode)
          // if(data.ifSynchro===true){
          //   this.$axios({
          //     method:'get',
          //     url:`/sending/synchroSendingResult`,
          //     params:{
          //       orderid:data.sending.orderid
          //     }
          //   })
          // }
          // this.$message({
          //   showClose:true,
          //   message:this.$t('m.send.success'),
          //   type:'success',
          //   duration:1000
          // })
        })
      }else{
        this.$message.error(this.$t('m.enter')+this.$t('m.send.expresscode'))
      }
    }
  },
  activated(){
    this.init()
  },
  beforeRouteLeave(to, form, next){
    this.dialogFormVisible=false
    this.dialogFormVisible1=false
    next()
  }
}
</script>
<style lang="scss" scoped>
.result{
  text-align:left;
  padding: 30px 180px;
  margin: 0 auto;
  height: 400px;
  overflow-y: scroll;
}
.result p{
  margin-bottom: 20px;
  font-size: 15px;
}
.result p span{
  margin-left: 10px;
  color:#67c23a;
}
</style>